<template>
  <section id='foot_guide'>
    <section @click="gotoAddress('/')" class="guide_item" v-bind:class="[$route.path.indexOf('/index') !== -1? 'act' : '']">
      <i class="iconfont icon-shouye icon_style"></i>
      <span>首页</span>
    </section>
    <section @click="gotoAddress('/category')" class="guide_item" v-bind:class="[$route.path.indexOf('category') !== -1? 'act' : '']">
      <i class="iconfont icon-category icon_style"></i>
      <span>分类</span>
    </section>
    <section @click="gotoAddress('/desk')" class="guide_item" v-bind:class="[$route.path.indexOf('desk') !== -1? 'act' : '']">
      <i class="iconfont icon-service icon_style"></i>
      <span>客服</span>
    </section>
    <section @click="gotoAddress('/cart')" class="guide_item" v-bind:class="[$route.path.indexOf('cart') !== -1? 'act' : '']">
      <i class="iconfont icon-cart icon_style"></i>
      <span>购物车</span>
    </section>
    <section @click="gotoAddress('/user')" class="guide_item" v-bind:class="[$route.path.indexOf('user') !== -1? 'act' : '']">
      <i class="iconfont icon-account icon_style"></i>
      <span>我的</span>
    </section>
  </section>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {

    }
  },
  created () {

  },
  mounted () {

  },
  computed: {
    ...mapState([
      'geohash'
    ])
  },
  methods: {
    gotoAddress (path) {
      this.$router.push(path)
    }
  }

}

</script>

<style lang="scss" scoped>
@import '../style/mixin.scss';

#foot_guide {
  background-color: #fff;
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  @include wh(100%, 1.95rem);
  display: flex;
  box-shadow: 0 -0.026667rem 0.053333rem rgba(0, 0, 0, .1);
}

.guide_item {
  flex: 1;
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  .icon_style {
    margin-bottom: .2rem;
    margin-top: .2rem;
  }
  span {
    color:#666;
    font-size: .45rem;
  }
  &.act{
    .icon_style {
    color:#ff6b6b;
  }
  span {
    color:#ff6b6b;
  }
  }
}
</style>
